<template>
    <div>
        <!-- <a-button type="primary" @click="showPreview(0)">查看图片</a-button> -->
        <img :src="images && images[0]" style="width: 40px;height: 40px;" @click="showPreview(0)">
        <a-modal :visible="previewVisible" :width="1500" @cancel="handleCancel" :footer="null">
            <div v-if="currentImage">
                <a-icon class="left-icon" v-if="currentIndex > 0" @click="prevImage" type="left"
                    :style="{ fontSize: '58px' }" />
                <img class="preview-img" :src="currentImage" />
                <a-icon class="right-icon" v-if="currentIndex < images.length - 1" @click="nextImage" type="right"
                    :style="{ fontSize: '58px' }" />
            </div>
        </a-modal>
    </div>
</template>

<script>
export default {
    props: {
        src: {
            type: String,
        },
    },
    name: "ImageGallery",
    data() {
        return {
            images: [],
            previewVisible: false,
            currentIndex: 0,
            currentImage: undefined
        };
    },
    created() {
        this.splitSrc(this.src)
    },
    watch: {
        'src': function (val) {
            this.splitSrc(val)
        }
    },
    methods: {
        splitSrc(string){
            this.images = string?.split(',')
        },
        showPreview(index) {
            this.currentIndex = index;
            this.previewVisible = true;
            this.currentImage = this.images[this.currentIndex];
        },
        prevImage() {
            if (this.currentIndex > 0) {
                this.currentIndex--;
            }
            this.currentImage = this.images[this.currentIndex];
        },

        nextImage() {
            if (this.currentIndex < this.images.length - 1) {
                this.currentIndex++;
            }
            this.currentImage = this.images[this.currentIndex];
        },
        handleCancel() {
            this.previewVisible = false;
        }
    }
};
</script>
<style lang="less" scoped>
/deep/ .ant-modal-body {
    display: flex;
    justify-content: center;
}

.preview-img {
    width: auto;
    height: 800px;
    max-height: 90vh;
}

/deep/ .ant-modal-wrap {
    top: -50px;
}

.left-icon {
    position: absolute;
    left: 20px;
    top: 50%;
}

.right-icon {
    position: absolute;
    right: 20px;
    top: 50%;
}
</style>